<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>简知乎</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<link rel="stylesheet" href="/static/css/bootstrap.css" />
		<script src="/static/js/jquery.js"></script>
		<style>
			body {
				background: #f3f3f3;
			}

			.check {
				background-color: #2d84cc !important;
				color: white !important;
				border: 1px solid #2d84cc !important;
			}

			.check svg {
				fill: white !important;
			}
		</style>
	</head>

	<body>
		<!--分辨率的宽度不要低于990-->
		<div class="container-fluid navbar-fixed-top" style="background:white;box-shadow: 0 1px 3px 0 rgba(0,34,77,.06);margin-bottom:20px;    border-bottom: 1px solid rgba(30,35,42,.06);">
			<div class="container">
				<div class="col-md-11" style="margin-left:50%;transform: translate(-50%,0);">
					<nav class="navbar navbar-default" style="background:white;margin-bottom:0px;border-color:white;">
						<div class="container-fluid">
							<div class="navbar-header">
								<a href="/index/" class="navbar-brand" href="#" style="font-size:25px;color:rgb(15, 136, 235);">
									<img alt="简知乎" src="...">
								</a>
							</div>
							<div class="navbar-brand navbar-right" style="padding:10px;">

								<img alt="Pic" src="http://static.spbeen.com/img/wechat_qrcode/qrcode_for_gh_5e6077ecc776_1280.jpg" style="height: 30px;width: 30px;object-fit: cover;border-radius: 2px;">

							</div>
						</div>
					</nav>

				</div>
			</div>
		</div>
		<div class="container-fluid container" style="margin-top:50px;f-height:200px;width:100%;background:white;box-shadow: 0 1px 3px 0 rgba(0,34,77,.06);    border-bottom: 1px solid rgba(30,35,42,.06);">
			<div class="col-md-10" style="margin-left:50%;transform: translate(-50%,0);">
				<div class="col-md-8">
					<h4 style="font-size: 22px;line-height:32px;font-weight: 700;color:black;">
						<!-- 学生应如何充分利用 MacBook Pro？ -->
						{{issue.title}}
					</h4>
					<div style="font-size: 15px;line-height: 25px;">
						<!-- 我买了 MacBook Pro with Retina Display (rMBP) 几个月。我感觉没什么软件适合我用，我也不是开发人员，所以认为对我... -->
						{{issue.description|truncatechars:120}}
						<!--作用不大。虽然 rMBP 用起来手感好，但我在 rMBP 上能做到的，在 iPad 和家里的台式 Windows PC 上都能做到。有什么功能是只有 rMBP 能做到的吗？-->
						<a href="#" style="font-weight: 400;font-size: inherit;color: #8590a6;text-decoration: none;">
					    	显示全部
					    	<svg viewBox="0 0 10 6" class="Icon ContentItem-arrowIcon Icon--arrow" width="10" height="16" aria-hidden="true" style="margin-left:6px;fill: #9fadc7;height: 17px; width: 10px;vertical-align: text-bottom;">
					    	<title></title><g>
					    		<path d="M8.716.217L5.002 4 1.285.218C.99-.072.514-.072.22.218c-.294.29-.294.76 0 1.052l4.25 4.512c.292.29.77.29 1.063 0L9.78 1.27c.293-.29.293-.76 0-1.052-.295-.29-.77-.29-1.063 0z">
					    	</path></g>
					    </svg>
					    </a>
					</div>

				</div>
				<div class="col-md-12">
					<div class="col-md-8" style="padding:0px;">
						<div style="margin:15px 0px;">
							<a style="color:#9fadc7;margin:5px 0px;text-decoration: none;cursor: pointer;">
								<svg style="vertical-align: text-bottom;fill:#9fadc7;" viewBox="0 0 20 18" xmlns="http://www.w3.org/2000/svg" class="Icon Icon--share Icon--left" width="13" height="16" aria-hidden="true" style="height: 16px; width: 13px;"><title></title><g><path d="M.93 3.89C-.135 4.13-.343 5.56.614 6.098L5.89 9.005l8.168-4.776c.25-.128.477.197.273.388L7.05 10.66l.926 5.953c.18 1.084 1.593 1.376 2.182.456l9.644-15.243c.584-.892-.212-2.03-1.234-1.796L.93 3.89z"></path></g></svg>
								分享
							</a>
							<a style="color:#9fadc7;margin:5px 10px;text-decoration: none;cursor: pointer;">
								<svg style="vertical-align: text-bottom;fill:#9fadc7;" viewBox="0 0 20 20" class="Icon Icon--star Icon--left" width="13" height="16" aria-hidden="true" style="height: 16px; width: 13px;"><title></title><g><path d="M3.515 17.64l.918-5.355-3.89-3.792c-.926-.902-.64-1.784.64-1.97L6.56 5.74 8.964.87c.572-1.16 1.5-1.16 2.072 0l2.404 4.87 5.377.783c1.28.186 1.566 1.068.64 1.97l-3.89 3.793.918 5.354c.22 1.274-.532 1.82-1.676 1.218L10 16.33l-4.808 2.528c-1.145.602-1.896.056-1.677-1.218z"></path></g></svg>
								邀请
							</a>
						</div>
					</div>
					<div class="col-md-4" style="text-align: center;">
						<button class="btn btn-default" style="margin:0px 5px;background: #0f88eb;color:white;border: 1px solid #0f88eb;">关注问题</button>
						<button class="btn btn-default" style="margin:0px 5px;color:#0f88eb;border: 1px solid #0f88eb;">
							<svg style="vertical-align: text-bottom;fill:#0f88eb;" viewBox="0 0 12 12" class="Icon Button-icon Icon--modify" width="14" height="16" aria-hidden="true" style="height: 16px; width: 14px;"><title></title><g><path d="M.423 10.32L0 12l1.667-.474 1.55-.44-2.4-2.33-.394 1.564zM10.153.233c-.327-.318-.85-.31-1.17.018l-.793.817 2.49 2.414.792-.814c.318-.328.312-.852-.017-1.17l-1.3-1.263zM3.84 10.536L1.35 8.122l6.265-6.46 2.49 2.414-6.265 6.46z" fill-rule="evenodd"></path></g></svg>
							写回答
						</button>
					</div>
				</div>
			</div>
		</div>
		<div class="container-fluid container" style="margin-top:20px;">

			<div class="col-md-11" style="margin-left:50%;transform: translate(-50%,0);">
				<div class="col-md-8" style="padding:0px;">



					<div class="container-fluid" style="padding:16px 20px;margin-bottom:20px;background-color:white;box-shadow: 0 1px 3px 0 rgba(0,34,77,.05);">
						<span style="font-weight: 700;font-size: 15px;color: #262626;">{{ issue.answers.all|length }} 个回答</span>

						{% for answer in issue.answers.all %}
						<div class="answer">
							<hr style="margin-top: 15px;margin-bottom: 15px;"/>

							<div style="margin-bottom:15px;">
								<img alt="Pic" src="https://img03.sogoucdn.com/app/a/100520071/aa84162947baa92d7f193e34a52374b1.jpg" style="height: 30px;width: 30px;object-fit: cover;border-radius: 2px;">
								<a href="#" style="text-decoration:none;color:black;font-weight: 600;">
									{{answer.belong_to.profile.nickname}}
									<!--用户昵称-->

								</a>
								<small>德玛西亚的魔法试练史上最年轻女士</small>
							</div>
							<div class="col-md-12" style="margin-bottom:15px;font-weight: 400;padding:0px;color:#262626;line-height: 1.67;cursor: pointer;font-size:15px;">
								<!-- 谢邀。 首先，对于大部分程序员而言，在工作中不是必须的，但是你要找工作，特别是刚毕业参加校招的学生，想进入一些比较大的公司（BAT之流），是必须要学好算法的。 此外，我认为在提高自我技术水平的过程中，比如去阅读一些优秀的代码的时候，也是需要算法功底的，就像去看leveldb、redis源码的时候，起码得知道跳表是个啥吧，看… -->
								{{answer.answer}}
								<a href="#" style="font-weight: 400;font-size: inherit;color: #8590a6;text-decoration: none;">
									阅读全文
									<svg viewBox="0 0 10 6" class="Icon ContentItem-arrowIcon Icon--arrow" width="10" height="16" aria-hidden="true" style="margin-left:6px;fill: #9fadc7;height: 17px; width: 10px;vertical-align: text-bottom;">
										<title></title>
										<g>
											<path d="M8.716.217L5.002 4 1.285.218C.99-.072.514-.072.22.218c-.294.29-.294.76 0 1.052l4.25 4.512c.292.29.77.29 1.063 0L9.78 1.27c.293-.29.293-.76 0-1.052-.295-.29-.77-.29-1.063 0z">
											</path>
										</g>
									</svg>
								</a>

							</div>

							<div>
								<span>
									<button style="line-height: 30px;padding: 0 12px;color: #2d84cc;background: #ebf3fb;border: 1px solid #ebf3fb;border-radius:3px;">
										<svg viewBox="0 0 20 18" class="Icon VoteButton-upIcon Icon--triangle" width="9" height="16" aria-hidden="true" style="vertical-align: text-bottom;height: 16px; width: 9px;fill:#2d84cc;">
											<title></title><g>
												<path d="M0 15.243c0-.326.088-.533.236-.896l7.98-13.204C8.57.57 9.086 0 10 0s1.43.57 1.784 1.143l7.98 13.204c.15.363.236.57.236.896 0 1.386-.875 1.9-1.955 1.9H1.955c-1.08 0-1.955-.517-1.955-1.9z"></path>
											</g>
										</svg>
										{{answer.agree}}
									</button>
									<button style="line-height: 30px;padding: 0 12px;color: #2d84cc;background: #ebf3fb;border: 1px solid #ebf3fb;border-radius:3px;">
										<svg viewBox="0 0 20 18" class="Icon VoteButton-downIcon Icon--triangle" width="9" height="16" aria-hidden="true" style="fill:#2d84cc;vertical-align: text-bottom;height: 16px; width: 9px;-webkit-transform: rotate(180deg);transform: rotate(180deg);">
											<title></title><g>
												<path d="M0 15.243c0-.326.088-.533.236-.896l7.98-13.204C8.57.57 9.086 0 10 0s1.43.57 1.784 1.143l7.98 13.204c.15.363.236.57.236.896 0 1.386-.875 1.9-1.955 1.9H1.955c-1.08 0-1.955-.517-1.955-1.9z"></path>
										</g></svg>
									</button>
								</span>
							</div>
							<div style="margin-top:10px;border:1px solid #f3f3f3;padding:0px 15px;border-radius:5px;">
								<h5 style="font-weight:700;font-size:15px;color:#1e1e1e;"> {{answer.comments.count}} 条评论</h5>

								{% for i in answer.comments.all %}

								<hr style="margin:10px 0px;">
								<img alt="Pic" src="https://img03.sogoucdn.com/app/a/100520071/ae12899ec5b481f26877c0672d525402.jpg" style="vertical-align: bottom;height: 20px;width: 20px;object-fit: cover;border-radius: 2px;">
								<a href="#" style="text-decoration:none;color:black;font-weight: 600;">
									{{i.belong_to.profile.nickname}}
									<!--用户昵称-->

								</a>

								<div style="margin: 10px 0px;line-height: 25px;">
									{{i.content}}
								</div>
								{% endfor %}


								<hr style="margin:10px 0px;">
								<form method="post" action="/comment/{{answer.id}}/" class="container-fluid " style="padding:0px;margin-bottom:10px;background-color:white;box-shadow: 0 1px 3px 0 rgba(0,34,77,.05);">
									<div style="width:100%;">
										{% csrf_token %}
										<input type="hidden" name="user" value="">
										<input style="width:90%;display: inline-block;" type="text" class="form-control" name="comment" placeholder="输入评论">

										<button type="submit" class="btn btn-default" style="border:1px solid #0f88eb;background-color:#0f88eb;color:white;">评论</button>
									</div>
								</form>
							</div>
						</div>
						{% endfor %}




					</div>

					<hr />

					<form method="post" action="/answer/{{issue.id}}/" class="container-fluid" style="padding:16px 20px;margin-bottom:20px;background-color:white;box-shadow: 0 1px 3px 0 rgba(0,34,77,.05);">
						<div style="width:100%;">
							<img style="width:38px;height:38px;overflow:hidden;" src="https://img03.sogoucdn.com/app/a/100520071/aa84162947baa92d7f193e34a52374b1.jpg" alt="Pic" />
							<a href="#" style="text-decoration:none;color:black;font-weight: 600;">
								<!-- 拉克丝 -->
								{{request.user.profile.nickname}}
								<!--用户昵称-->

							</a>
							<small>德玛西亚的魔法试练史上最年轻女士</small>
							<div class="checkbox" style="display: inline-block;float: right;">
						        <label>
						            <input type="checkbox" name="anonymity"> 匿名回答
						        </label>
						    </div>
							<!--<input style="vertical-align: text-bottom;" type="checkbox" name="anomi"/>匿名回答-->
							<textarea class="form-control" name="answer" placeholder="写回答..." style="line-height: 24px;font-size: 15px;height:180px;margin:10px 0px 0px 0px;resize: none;border: 0px;box-shadow: none;border-top: 1px solid #f3f3f3;border-radius: 0px;border-bottom: 1px solid #f3f3f3;"></textarea>
							{% csrf_token %}
							<div class="form-group" style="margin:15px 0px 0px 0px;">

						        <button type="submit" style="background-color:#0d79d1;color:white;border-color:#0d79d1;float:right;" class="btn btn-default">提交回答</button>

							</div>
						</div>
					</form>

				</div>

				<div class="col-md-4" style="padding-right:0px;">
					<div class="container-fluid" style="padding:16px 20px;margin-bottom:20px;background-color:white;box-shadow: 0 1px 3px 0 rgba(0,34,77,.05);">
						<span style="font-weight: 700;font-size: 15px;color: #262626;">相关问题</span>
						<hr style="margin-top: 15px;margin-bottom: 15px;"/>

						<a style="display:inline-block;color: #175199;margin:10px 0px;cursor: pointer;">
						OS X Mavericks 的免费升级策略，是否会对微软造成重大冲击，微软可以如何应对？
						</a>


						<a style="display:inline-block;color: #175199;margin:10px 0px;cursor: pointer;">
						有触控板和 MacBook 一样好的笔记本吗？
						</a>
						<a style="display:inline-block;color: #175199;margin:10px 0px;cursor: pointer;">
						OS X 好用在哪里？
						</a>
					</div>
				</div>
			</div>
		</div>

	</body>

</html>